---
title: 分析打包产物的大小
description: 了解如何使用 `rollup-plugin-visualizer` 来分析 Astro 生成的打包产物。
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

了解 Astro 的打包产物有哪些组成部分，对于提高网站性能很重要。对打包产物进行可视化，可以为减少你项目中的打包大小提供线索。

## 方案

[`rollup-plugin-visualizer` 库](https://github.com/btd/rollup-plugin-visualizer)允许你可视化和分析你的 Rollup 打包产物，看看哪些模块正在占用空间。
<Steps>
1. 安装 `rollup-plugin-visualizer`：

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. 将插件添加到 `astro.config.mjs` 文件中：

    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
    vite: {
        plugins: [visualizer({
            emitFile: true,
            filename: "stats.html",
        })]
    }
    });
    ```
3. 运行构建命令：

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. 找到你项目中的 `stats.html` 文件。

    对于完全静态的站点，它将会位于你的 `dist/` 目录的根目录下，并允许你查看打包产物中包含的内容。
		
    如果你的 Astro 项目使用了按需渲染，你将有两个 `stats.html` 文件。一个用于客户端，另一个用于服务器，每个都位于 `dist/client` 和 `dist/server/` 目录的根目录下。
		
    有关对于这些文件的详解或配置特定选项的指导，请参阅 [Rollup Plugin Visualizer 文档](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files)。
		
</Steps>

:::note
鉴于 Astro 独特的水合方式，该构建的打包产物不一定能代表客户端将收到的包。

该插件显示整个站点所使用的全部依赖项，但它并不会按各个页面来细分包大小。
:::
